<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<jsp:include page="/comm/header.jsp"></jsp:include>
<script src="<%= path%>/script/jquery-1.4.2.min.js" ></script>
<div class="clear"></div>
<!--第1部分开始  --> 
    <div class="wrap1">
    	<div class="blank1"></div>
<!--选项卡开始--> 	
<div id="mainTabbox">
 		<jsp:include page="../tabboxhead.jsp"/>
 	<div id="conten">
 		<div class="tab_show" id="con_tabmy_1">
  
<jsp:include page="left.jsp"></jsp:include>
<div class="wrap_left">
	<div class="wrap_m2">
<form name="cardcheck" action ="cardcheck.htm" enctype="multipart/form-data" method="post">
	<!--证件认证开始-->
<div class="outbox4">
	<div class="tab7_tt">证件认证</div>
	<div class="input_box">
		<ul>
    	<li class="t1"><span class="span33">证件类型：</span></li>
        <li class="t2">
        		<s:select id="cardtype" name="userAttr.cardtype" list='#{"1":"身份证"}' />
        </li>
        <li class="t1"><span class="span33">证件号码：</span></li>
        <li class="t2">
			<s:textfield id="cardid" name="userAttr.cardid" theme="simple"  styleClass="input1"/><span id="cardid_msg"></span>
        </li>
        
        <li class="t1"><span class="span33">真实姓名：</span></li>
        <li class="t2">
        	<s:textfield id="username" name="userAttr.username" theme="simple"  styleClass="input1"/><span id="username_msg"></span>
        </li>
        <li class="t1"><span class="span33">身份证证件图片：</span></li>
        <li class="t2">
			<s:file id="cardFile" name="cardFile" theme="simple" styleClass="input5"/><span id="cardFile_msg"></span><br />
        </li>
    	</ul>
	</div>
	<div class="clear"></div>
	<div class="but_submit" style="text-align:center; margin:30px 0"><a href="javascript:check()">确认提交</a>&nbsp;&nbsp;&nbsp;</div>
</div>
<!--证件认证结束-->
</form>	 
    </div>
</div>
<div class="clear"></div>
        <!--内容结束-->
 		</div>
 	</div>
 </div>
<!--选项卡结束-->         
      </div>
    </div>
<jsp:include page="/comm/bottom.jsp"></jsp:include>
</body>
</html>
<script type="text/javascript">
	function check(){
		
		var cardid_val = $("#cardid").val().replace(/(^\s*)|(\s*$)/g, "");
		if(!checkID(cardid_val)){
			return;
		}
		
		var username = $("#username").val().replace(/(^\s*)|(\s*$)/g, "");
		
		if(username.length <=0){
			$("username_msg").html("姓名不能为空!");
			return;
		}
		
		if(username.length >30){
			$("username_msg").html("姓名长度不能超过30个字符!");
			return;
		}
		
		if(!isValidateFile()){
			return;
		}
		
		document.cardcheck.submit();
	}
	
	function isValidateFile(){ 
		var obj=document.getElementById('cardFile');
		
		var file = obj.value;
		if(file == null || file == ""){
			$("#cardFile_msg").html("身份证件图片不能为空!");
			return(false);
		}
		
	    var extend = file.substring(file.lastIndexOf(".")+1); 
	    
	    if(extend==""){ 
	    	$("#cardFile_msg").html("图片格式不符合要求!");
	    }else{ 
	    	extend = extend.toLowerCase();
			if(!(extend=="png"||extend=="jpg"||extend=="gif")){ 
	   			$("#cardFile_msg").html("请上传后缀名为jpg/png/gif的文件!"); 
	   			var nf = obj.cloneNode(true); 
	            nf.value=''; 
	            obj.parentNode.replaceChild(nf, obj); 
	   			return false; 
			} 
	    } 
	    return true; 
	}
	
	//自定义的身份证验证函数
	function checkID(f) {
	        // 身份证验证 18 位数字
	    // 1. 18位
	    if(f.length != 18) {
	    	$("#cardid_msg").html("<font color='red'>请输入中国公民的18位身份证号码, 您当前输入了"+ f.length + "位号码!</font>");
	        f.ID.focus();
	        return false;
	    }
	    // 2. 确保前17位每一位都是数字
	    for(i = 0; i < f.length - 1; i++) {
	        // 如何判断一个字母是数字
	        if(isNaN( parseInt( f.charAt(i) ) )) {
	        	$("#cardid_msg").html("<font color='red'>您输入的身份证号码前17位包含有字母, 不合要求!</font>");
	            f.ID.focus();
	            return false;    
	        }
	    }
	    
	    // 3. 确保最后一位是数字或者X
	    var lastIDNum = f.charAt(17);
	    if( isNaN(parseInt( f.charAt(i) )) &&  lastIDNum.toLowerCase() != 'x') {
	    	$("#cardid_msg").html("您输入的身份证号码最后一位不是数字也不是x, 不合要求!</font>");
	        f.ID.focus();
	        return false;
	    }
	    
	    return true;
	}

</script>
